<template>
  <div>
    <TypeName />
    <!--列表-->
    <ListContainer />
    <!--今日推荐-->
    <TodayRecommend />
    <!-- 商品排行 -->
    <Rank />
    <!-- 猜你喜欢 -->
    <Like />
    <!--楼层-->
    <!-- 需要去组件floor中拿到数据进行遍历展示 -->
    <!-- 
        一开始floors是空数组，空数组会不会生成Floor组件？
        不会生成Floor组件
        异步请求回来更新floors数据，此时才会遍历生成多个Floor组件
        一旦Floor组件生成，数据此时也已经有了
        所以解决方法是：
     -->
    <Floor v-for="floor in floors" :key="floor.id" :floor="floor" />
    <!--商标-->
    <Brand />
  </div>
</template>

<script>
// 引入TypeName
  import TypeName from '../../components/TypeName'
  import Brand from './Brand/Brand'
  import Floor from './Floor/Floor'
  import Like from './Like/Like'
  import ListContainer from './ListContainer/ListContainer'
  import Rank from './Rank/Rank'
  import TodayRecommend from './TodayRecommend/TodayRecommend'
  // 引入请求的方法
  import {reqGetFloors} from '../../api/home'
  export default {
    name: 'Home',
    data(){
      return{
        floors:[],
      }
    },
    mounted(){
      // 发送完请求需要在data中更新数据
      reqGetFloors().then((res)=>{
          this.floors=res;
        });
        // catch不去定义也可以
    },
    components: {
      Brand,
      Floor,
      Like,
      ListContainer,
      Rank,
      TodayRecommend,
      TypeName,
    },
    
  }
</script>

<style lang="less" scoped>

</style>